<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../lib/vue/element.css">
    <link rel="stylesheet" href="../../lib/vue/dark.css">
    <style>
        html, body {
            height: 100%;
            padding: 0 8px;
        }

        .el-collapse-item__header {
            height: 32px;
        }
        .el-collapse-item__content {
            padding-bottom: 0;
        }
        .el-collapse-item__header  .env-top-icon {
            display: none;
        }
        .el-collapse-item__header:hover .env-top-icon {
            display: inline-flex;
        }
        .el-button:focus-visible {
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app" class="container-fluid">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
            <div>
                账号列表
            </div>
            <div>
                <el-dropdown @command="handleDropdownCommand">
                    <el-button size="small" style="margin-left: 10px;" @click="addAccount">
                        添加<el-icon style="margin-left: 4px;"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="import">导入</el-dropdown-item>
                            <el-dropdown-item command="export">导出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div>
            <el-collapse v-model="activeEnvs">
                <el-collapse-item
                    v-for="envGroup in accounts"
                    :key="envGroup.env"
                    :name="envGroup.env"
                >
                    <template #title>
                        <div :style="activeEnvStyle(envGroup)" style="display: flex; align-items: center;">
                            {{ envGroup.env }}
                            <el-tooltip content="置顶" placement="top">
                                <el-icon
                                    class="env-top-icon"
                                    style="margin-left: 8px; cursor: pointer;"
                                    @click.stop="topEnv(envGroup.env)"
                                >
                                    <top />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                    <div v-for="account in envGroup.children" :key="account.loginId" style="margin-bottom: 8px;">
                        <div style="display: flex; align-items: center; gap: 8px; margin: 4px 0">
                            <el-tag size="small" type="info">{{ account.domain }}</el-tag>
                            <el-tooltip :content="account.loginId" :show-after="500">
                                <div :style="activeStyle(account)">{{ account.loginId }}</div>
                            </el-tooltip>
                            <el-tag text size="small" @click="refreshLogin(account)" style="cursor: pointer;">
                                dev
                            </el-tag>
                            <el-tag v-if="account.url" text size="small" @click="prodLogin(account)" style="cursor: pointer;">
                                prod
                            </el-tag>
                            <el-icon @click="copyLogin(account)" style="cursor: pointer;"><copy-document /></el-icon>
                            <el-icon @click="editAccount(account)" style="cursor: pointer;">
                                <edit />
                            </el-icon>
                            <el-popconfirm
                                title="确定删除该账号吗？"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                @confirm="deleteAccount(account)"
                            >
                                <template #reference>
                                    <el-icon style="cursor: pointer;">
                                        <delete />
                                    </el-icon>
                                </template>
                            </el-popconfirm>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <el-dialog v-model="createVisible" width="80%" @closed="onClose" center>
                <template #header>
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span style="margin-right: 10px;">{{ editEnv ? '编辑账号' : '添加账号' }}</span>
                        <el-tag type="info" v-if="!editEnv" @click="importAccount" size="small">从剪切板导入</el-tag>
                    </div>
                </template>
                <el-form ref="formRef" :model="form" :rules="rules">
                    <el-form-item label="环境" prop="env" :label-width="formLabelWidth" required>
                        <el-input v-model="form.env"  placeholder="demo(区分用)" :disabled="!!editEnv" />
                    </el-form-item>
                    <el-form-item label="domain" prop="domain" :label-width="formLabelWidth" required>
                      <el-input v-model="form.domain"  placeholder="guanbi" :disabled="!!editEnv" />
                    </el-form-item>
                    <el-form-item label="loginId" prop="loginId" :label-width="formLabelWidth" required>
                      <el-input v-model="form.loginId"  placeholder="admin" :disabled="!!editEnv" />
                    </el-form-item>
                    <el-form-item prop="emailLogin" :label-width="formLabelWidth">
                      <el-checkbox v-model="form.emailLogin">emailLogin</el-checkbox>
                    </el-form-item>
                    <el-form-item label="password" prop="password" :label-width="formLabelWidth" required>
                      <el-input v-model="form.password" placeholder="123456" />
                    </el-form-item>
                    <el-form-item label="vendor" prop="vendor" :label-width="formLabelWidth">
                      <el-input v-model="form.vendor" placeholder="ldap" />
                    </el-form-item>
                    <el-form-item label="host" prop="host" :label-width="formLabelWidth">
                      <el-input v-model="form.host" placeholder="127.0.0.1(开发环境必填)" />
                    </el-form-item>
                    <el-form-item label="port" prop="port" :label-width="formLabelWidth">
                      <el-input v-model="form.port" placeholder="9000(开发环境必填)" />
                    </el-form-item>
                    <el-form-item label="url" prop="url" :label-width="formLabelWidth">
                      <el-input v-model="form.url" placeholder="https://demo.guandata.com(生产环境必填)" />
                    </el-form-item>
                    <el-form-item label="browser" prop="browser" :label-width="formLabelWidth">
                      <el-select v-model="form.browser" placeholder="请选择浏览器">
                        <el-option v-for="browser in browsers" :key="browser.value" :label="browser.label" :value="browser.value" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="onClose">取消</el-button>
                    <el-button type="primary" @click="onConfirm(formRef)">
                      确定
                    </el-button>
                  </div>
                </template>
            </el-dialog>
            <el-dialog v-model="importVisible" title="导入账号" width="80%" center>
                <el-container>
                    <el-input v-model="importText" :rows="10" type="textarea" placeholder="请粘贴账号数据" />
                </el-container>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="importVisible = false">取消</el-button>
                        <el-button type="primary" @click="onImportConfirm">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
    <script src="../../lib/vue/vue.js"></script>
    <script src="../../lib/vue/element.js"></script>
    <script src="../../lib/vue/index.iife.min.js"></script>
    <script src="../../src/view/test-webview.js"></script>
</body>

</html>